<template>
  <el-drawer v-model="show"
             title="批次列表"
             size="50%">
    <el-table :data="tableData"
              :header-cell-style="{color: '#000', backgroundColor: '#f8f8f9'}"
              v-loading="loading">
      <el-table-column prop="id"
                       label="批次ID">
      </el-table-column>
      <el-table-column prop="created_time"
                       label="时间"
                       width="200">
      </el-table-column>
      <el-table-column prop="num"
                       label="数量">
      </el-table-column>
      <el-table-column label="操作"
                       width="200">
        <template #default="scope">
          <el-button type="primary"
                     @click="orderDetails(scope.row)">订单明细</el-button>
          <el-button type="info"
                     @click="exportExcelOperate(scope.row)">导出</el-button>
        </template>
      </el-table-column>
    </el-table>
    <OrderDetailCom ref="orderDetailCom"
                    :curRow="curRow" />
  </el-drawer>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { getBactchList, exportLog } from '/@/api/backend/order/orderDocument'
import OrderDetailCom from './orderDetailCom.vue'
import Cookies from 'js-cookie'
import { fileDownload } from '/@/api/common'

const orderDetailCom: any = ref<InstanceType<typeof OrderDetailCom>>()
const loading = ref(false)
const show = ref(false)
const tableData = ref([] as any[])
const curRow = ref({})
const init = () => {
    bactchList()
}

const bactchList = () => {
    loading.value = true
    getBactchList().then(res => {
        if(res.data && res.data.length) {
            tableData.value = res.data
        }
        loading.value = false
    }) 
}

const orderDetails = (row:any) => {
    curRow.value = { ...row }
    orderDetailCom.value.show = true
}

const exportExcelOperate = (row:any) => {
    loading.value = true
    exportLog({ batch_id: row.id }).then(res => {
        fileDownload(res, Cookies.get('filename') || 'file.xlsx')
    }).catch(err => {
        loading.value = false
    }).finally(() => { 
        loading.value = false
    })
}

defineExpose({
    show
})

watch(
    () => show.value,
    (v) => {
        if(v){
            init()
        }
    }
)
</script>

<style scoped lang="scss">

</style>